<template>
   <div class="recommend-content">
      <div class="left">
         <router-link to="">
            <img v-lazy="recommend[0].recommendSrc" alt="">
         </router-link>
      </div>
      <div class="right">
         <div class="box-1">
            <router-link to="">
               <img v-lazy="recommend[1].recommendSrc" alt="">
            </router-link>
         </div>
         <div class="box-2">
            <div v-for="item of lists" :key="item.recommendSrc">
               <router-link to="">
                  <img v-lazy="item.recommendSrc" alt="">
               </router-link>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'sectionBoxRecomendCommon',
      data() {
         return {
            lists: []
         }
      },
      props: {
         recommend: {
            type: Array,
            required: true,
            default() {
               return []
            }
         }
      },
      mounted() {
         this.lists = this.recommend.slice(2, this.recommend.length)
      }
   }
</script>

<style scoped lang="stylus">
   .recommend-content
      display flex
      justify-content space-between
      width 100%
      margin-bottom 10px
      .left a
         display block
         text-align center
         img
            width 615px
            height 450px
      .right
         width 616px
         height 450px
         display flex
         flex-wrap wrap
         .box-1
            width 100%
            height 220px
            text-align center
            img
               width 100%
               height 220px
         .box-2
            margin-top 10px
            width 100%
            height 220px
            display flex
            justify-content space-between
            div
               img
                  width 303px
                  height 220px
</style>
